Ext.define('PhotoList.view.PhotoListSettingForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.photolist_setting_form',
    config: {
        items: [
            {
    	        docked: 'top',
    	        xtype: 'titlebar',
    	        title: 'PhotoList Setting'
        	},
            {
                xtype: 'fieldset',
                instructions: 'Change Photo Cls Effect',
                title: 'Photo Effect',
                items: [
                    {
                        xtype: 'togglefield',
                        label: 'showBorderRadius',
                        labelWidth: '60%',
                        value: 1,
                        itemId: 'tfShowBorderRadius'
                    },
                    {
                        xtype: 'togglefield',
                        label: 'showShadow',
                        labelWidth: '60%',
                        value: 1,
                        itemId: 'tfShowShadow'
                    },
                    {
                        xtype: 'togglefield',
                        label: 'showTitle',
                        labelWidth: '60%',
                        value: 1,
                        itemId: 'tfShowTitle'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                instructions: 'Width must equal height',
                title: 'Photo Size',
                items: [
                    {
                        xtype: 'selectfield',
                        label: 'Size',
                        itemId: 'sfSize',
                        options: [
                            {
                                text: '100px',
                                value: '100px'
                            },
                            {
                                text: '150px',
                                value: '150px'
                            },
                            {
                                text: '200px',
                                value: '200px'
                            },
                            {
                                text: '250px',
                                value: '250px'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'fieldset',
                instructions: 'Show or hide the testing top bar',
                title: 'Testing Bar',
                items: [
                    {
                        xtype: 'togglefield',
                        label: 'ShowTestingBar',
                        labelWidth: '60%',
                        value: 1,
                        itemId: 'tgShowTestingBar'
                    }
                ]
            }
        ],
        
		listeners: [{
			fn: 'OnToggleShowBorderRadius',
			event: 'change',
			delegate: '#tfShowBorderRadius'
		},{
			fn: 'OnToggleShowShadow',
			event: 'change',
			delegate: '#tfShowShadow'
		},{
			fn: 'OnToggleShowTitle',
			event: 'change',
			delegate: '#tfShowTitle'			
		},{
			fn: 'OnSelectNewSize',
			event: 'change',
			delegate: '#sfSize'
		},{
			fn: 'OnToggleShowTestingBar',
			event: 'change',
			delegate: '#tgShowTestingBar'
		},{
			fn: 'onPainted',
//			event: 'initialize'
			event: 'painted'
		}],
		
		photoListRef: null
    },
    

	/**--------------------------------------------------------------------------------------------------------
	 * onPainted: save PhotoList reference
	 *--------------------------------------------------------------------------------------------------------*/
	onPainted: function(){
		 this.setPhotoListRef( this.getParent().down( 'photo_list' ) );
	},
	
    /**--------------------------------------------------------------------------------------------------------
     * OnToggleShowBorderRadius
     * 
     * @param	{Ext.field.Toggle}	fieldRef
     * @param	{Number}			newValue
     *--------------------------------------------------------------------------------------------------------*/
    OnToggleShowBorderRadius: function( fieldRef, newValue ){
		if ( newValue.getValues()[0] == 1 )
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowBorderRadius, true );
		else
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowBorderRadius, false );
	},
	
    /**--------------------------------------------------------------------------------------------------------
     * OnToggleShowShadow
     * 
     * @param	{Ext.field.Toggle}	fieldRef
     * @param	{Number}			newValue
     *--------------------------------------------------------------------------------------------------------*/
    OnToggleShowShadow: function( fieldRef, newValue ){
		if ( newValue.getValues()[0] == 1 )
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowShadow, true );
		else
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowShadow, false );
	},
	
    /**--------------------------------------------------------------------------------------------------------
     * OnToggleShowTitle
     * 
     * @param	{Ext.field.Toggle}	fieldRef
     * @param	{Number}			newValue
     *--------------------------------------------------------------------------------------------------------*/
    OnToggleShowTitle: function( fieldRef, newValue ){
		if ( newValue.getValues()[0] == 1 )
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowTitle, true );
		else
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowTitle, false );
	},
	
    /**--------------------------------------------------------------------------------------------------------
     * OnSelectNewSize
     * 
     * @param	{Ext.field.Select}	fieldRef
     * @param	{Mixed}			newValue
     *--------------------------------------------------------------------------------------------------------*/
    OnSelectNewSize: function( fieldRef, newValue ){
		this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_Size, newValue );
	},
     
    /**--------------------------------------------------------------------------------------------------------
     * OnToggleShowTitle
     * 
     * @param	{Ext.field.Toggle}	fieldRef
     * @param	{Number}			newValue
     *--------------------------------------------------------------------------------------------------------*/
	OnToggleShowTestingBar:function( fieldRef, newValue ){
 		if ( newValue.getValues()[0] == 1 )
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowTestingBar, true );
		else
			this.getPhotoListRef().fireEvent( PhotoList.model.UserEvent.onSettingChanged_ShowTestingBar, false );

	}




});